<template>
  <div class="answer-header">
    <nav class="header-box-inner flex-center-wrap">
      <div class="header-center flex-center-wrap">
        <div
          v-for="(item, index) in headerTabsNav"
          :key="index"
          class="header-tab-item"
          :class="currentNavTab === index + 1 ? 'header-tab-item-active' : ''"
          @click="chooseNavTab(index)"
        >
          <div>{{ item.name }}</div>
          <div
            v-if="index === 2 && +unReadCount > 0 && currentNavTab < 4"
            class="header-tab-item-count"
          >
            {{ unReadCount }}
          </div>
        </div>
      </div>
    </nav>
    <div class="border-bottom"></div>
  </div>
</template>

<script>
import { clearKeywordsHistory } from '@/api/answer_question'
export default {
  components: {},
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      // 我的菜单数据
      myMenus: [
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/my-course-icon.png',
          title: '我的课程',
          href: '/personal/index.html?name=1'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/my-test-icon.png',
          title: '我的题库',
          href: '/personal/index.html?name=2'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/my-shop-icon.png',
          title: '商城中心',
          href: '/courses/'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/answer-icon.png',
          defaultImg:
            '//image.zlketang.com/public/news/images/new_official/home/answer-icon.png',
          title: '答疑中心',
          href: '/dayi/'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/test-guide-icon.png',
          title: '考试指南',
          href: '/cjkj/guide/'
        },
        {
          img:
            '//image.zlketang.com/public/news/images/new_official/home/suggestion-icon.png',
          title: '投诉建议'
        }
      ],
      newsHistorys: [],
      // 学习记录弹窗内容类型 1：课程：2：文章
      showStudyType: 1,
      activeIndex: 1,
      historyType: [
        {
          type: 1,
          label: '资讯'
        },
        {
          type: 2,
          label: '课程'
        }
      ],
      // 是否显示学习记录
      isShowStudy: false,
      // 是否显示我的课程
      isShowCourse: false,
      // 设置顶部导航栏样式类型1：默认;2:自定义；
      headStyleType: 1,
      //头部tab列表
      headerTabsNav: [
        {
          id: 1,
          name: '最新问答'
        },
        {
          id: 2,
          name: '精华答疑'
        },
        {
          id: 3,
          name: '我的提问'
        }
      ],
      //是否首次打开弹窗
      isFirstOpenBox: true,
      //是否显示搜索框
      isShowSearchBox: false,
      //搜索输入框内容
      searchText: '',
      //输入框是否聚焦
      isFocus: false
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    },
    profession_name() {
      return this.$route.meta.profession_name
    },
    isLogin() {
      return this.$store.state.user.isLogin
    },
    currentNavTab() {
      return this.$store.state.answerQuestion.navTab
    },
    isClickMyQuesTab() {
      return this.$store.state.answerQuestion.isClickMyQuesTab
    },
    hotSearch() {
      return this.$store.state.answerQuestion.hotSearch
    },
    unReadCount() {
      return this.$store.state.answerQuestion.unreadCount
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    // 监听页面点击事件,隐藏学习记录、我的弹窗
    handleBodyClick() {
      window.addEventListener('click', () => {
        this.isShowStudy = false
        this.isShowCourse = false
        this.isShowSearcHistorys = false
      })
    },
    // a标签点击事件埋点
    handleZla(name, content) {
      this.zlaBtn = {
        key_name: name,
        key_content: name
      }
      if (content === '投诉建议') {
        this.$bus.$emit('showTsDialog')
      }
    },
    // 切换记录类型
    handleHistory() {},
    // 退出登录
    loginOut() {
      this.$confirm('是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'custom-confirm-box'
      })
        .then(async () => {
          await this.$store.dispatch('user/loginOut')
          this.$message({ type: 'success', message: '退出成功' })
          location.reload()
        })
        .catch(() => {})
    },
    aGoToLogin() {
      sessionStorage.setItem('lastUrl', location.href)
      this.goTo('/login.html')
    },
    // 展示学习记录
    showStudy() {
      this.zlaBtn = {
        key_name: '学习记录',
        key_content: '学习记录'
      }
      // 跳转登录页
      if (location.href.includes('login.html')) return
      this.isShowCourse = false
      if (!this.isLogin) {
        sessionStorage.setItem('lastUrl', location.href)
        this.goTo('/login.html')
      } else {
        this.isShowStudy = !this.isShowStudy
      }
    },

    //选择navTab
    chooseNavTab(index) {
      this.isShowSearchBox = false
      let { name } = this.headerTabsNav[index]
      if (name) {
        this.zlaBtn = {
          key_name: name,
          key_content: name
        }
      }

      if (index === 2 && !this.isLogin) {
        storage.set('answerNav', index + 1)
        this.$store.commit('answerQuestion/setNavTab', {
          currentNavTab: index + 1
        })
        sessionStorage.setItem('lastUrl', location.href)
        this.goTo('/login', {
          replace: true
        })
        return
      }

      this.$emit('change', index)
      if (this.currentNavTab < 4) {
        this.$store.commit('answerQuestion/setNavTab', {
          currentNavTab: index + 1
        })
      } else {
        storage.set('answerNav', index + 1)
        this.goTo('/dayi/', {
          query: {},
          target: '_blank',
          watch: true
        })
      }
    },
    //显示搜索框
    showSearchBox() {
      //仅在首次搜索的时候调用接口，用户登陆
      if (this.isFirstOpenBox && this.isLogin && this.hotSearch.length === 0) {
        this.isFirstOpenBox = false
        this.$store.dispatch('answerQuestion/getHotSearch')
      }
      this.searchText = ''
      this.isShowSearchBox = true
    },
    //搜索问题
    searchQuestion() {
      if (!this.searchText) return this.$message.warning('请输入问题进行搜索')
      this.zlaBtn = {
        key_name: '搜一搜',
        key_content: this.searchText
      }
      if (location.href.includes('ask') || location.href.includes('dayi')) {
        storage.set('searchAnswerText', this.searchText)
        this.goTo('/dayi/', {
          query: { from: 'ask' },
          target: '_blank',
          watch: true
        })
        return
      }
      this.$store.commit('answerQuestion/setKeyword', this.searchText)
      this.$store.dispatch('answerQuestion/getSearchQuestionResult', {
        page: 1,
        limit: 10,
        keywords: this.searchText
      })
      this.isShowSearchBox = false
    },
    //输入框聚焦
    inputFocus() {
      this.isFocus = true
    },
    inputBlur() {
      this.isFocus = false
    },
    //选择搜索
    chooseSearch(item) {
      this.searchText = item
      this.searchQuestion()
    },
    inputSearch(val) {
      this.searchText = val
      this.isShowSearchBox = false
      this.searchQuestion()
    },
    closeSearchDialog() {
      this.isShowSearchBox = false
    },
    deleteHistorys() {
      clearKeywordsHistory()
        .then(res => {
          this.$store.dispatch('answerQuestion/getHotSearch')
        })
        .catch(() => {})
    }
  },
  mounted() {
    let query = this.getQuery(location.href)
    if (query.from === 'new_all') {
      this.$store.commit('answerQuestion/setNavTab', { currentNavTab: 1 })
      this.$emit('changeProfession')
    }
    this.newsHistorys = storage.get('user_news_historys')
      ? JSON.parse(storage.get('user_news_historys'))
      : []
    this.handleBodyClick()
    window.addEventListener(
      'scroll',
      () => {
        this.closeSearchDialog()
      },
      true
    )
    let alink = document.getElementsByTagName('a')
    for (let i = 0; i < alink.length; i++) {
      alink[i].addEventListener('click', () => {
        this.isShowSearchBox = false
      })
    }
  }
}
</script>

<style scoped>
.answer-header {
  margin: 0 -30px;
  height: 38px;
}

.header-box-inner {
  position: relative;
  height: 100%;
  margin: 0 auto;
  display: flex;
  padding: 0 30px;
}

.header-center {
  height: 100%;
}

.header-tab-item {
  position: relative;
  line-height: 22px;
  margin-right: 30px;
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
}

.header-tab-item-count {
  position: absolute;
  left: 66px;
  top: -10px;
  line-height: 18px;
  padding: 0 4px;
  background-color: #ff5338;
  font-size: 12px;
  color: #fff;
  border-radius: 8px;
}
.header-tab-item-active {
  color: #3480ff;
  font-weight: 600;
}
.header-tab-item-active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: calc(50% - 15px);
  width: 30px;
  height: 3px;
  background-color: #3480ff;
  border-radius: 2px;
}
.header-tab-item:last-child {
  margin-right: 0;
}

.border-bottom {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
}
</style>
